<script setup>
  import { ref, reactive } from 'vue'
  import breadCrumb from '@/components/bread_crumb.vue'
  import { getAllSwiperApi, getAllCompanyIntroduceApi } from '@/api/setting.js'
  import { bus } from '@/mitt/mitt.js'
  import introduce from './components/introduce.vue'
  const item = ref({
    first: '首页',
  })

  // 表格数据
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]

  // 轮播图
  const imageUrlSwiper = ref([])
  // 获取轮播图
  const returnAllSwiper = async () => {
    const res = await getAllSwiperApi()
    const url = res.data.data.map((item) => {
      return item.set_value
    })
    // console.log(res);
    imageUrlSwiper.value = url
  }
  returnAllSwiper()

  // 获取所有公司信息详情
  const introduceValue = ref([])
  const getAllCompanyIntroduce = async () => {
    const res = await getAllCompanyIntroduceApi()
    const [name, ...introduce] = res.data.data
    introduceValue.value = introduce
  }
  getAllCompanyIntroduce()

  // introduce 实例
  const introduceRef=ref()
  const openIntroduce = (id) => {
    bus.emit('introduce', id)
    introduceRef.value.open()
  }
</script>

<template>
  <breadCrumb ref="breadCrumb" :item="item"></breadCrumb>
  <!-- 首页布局外壳 -->
  <div class="home-wrapped">
    <!-- 轮播图外壳 -->
    <div class="swiper-wrapped">
      <el-carousel
        indicator-position="outside"
        :interval="4000"
        type="card"
        height="240px"
      >
        <el-carousel-item v-for="item in imageUrlSwiper" :key="item">
          <img :src="item" alt="" v-if="item" class="swiper" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 栅格布局外壳 -->
    <div class="layout-wrapped">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item,index) in introduceValue" :key="item.set_name"  @click="openIntroduce(index + 1)">
          <div class="company-message-area">
            <span>{{ item.set_name }}</span>
            <div
              v-html="item.set_text || item.set_value || '暂未编辑'"
              class="company-introduce"
            ></div></div
        ></el-col>
      </el-row>
    </div>
    <!-- 表格外壳 -->
    <div class="two-table-wrapped">
      <!-- 公司公告 -->
      <div class="company-notice">
        <span class="title">公司公告</span>
        <el-table :data="tableData" style="width: 100%" :show-header="false">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
      <!-- 系统消息 -->
      <div class="system-message">
        <span class="title">系统消息</span>
        <el-table :data="tableData" style="width: 100%" :show-header="false">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
    </div>
  </div>
  <introduce ref='introduceRef'></introduce>
</template>

<style lang="scss" scoped>
  @mixin table-class {
    // height: 232px;
    min-height: 140px;
    width: 48%;
    display: flex;
    flex-direction: column;
  }

  // 首页外壳
  .home-wrapped {
    padding: 8px;
    height: calc(100vh - 101px);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;

    // 轮播图外壳
    .swiper-wrapped {
      padding: 0 20px;
      background: #fff;
      margin-bottom: 8px;

      .swiper {
        width: 100%;
        height: 100%;
      }
    }

    // 栅格布局外壳
    .layout-wrapped {
      padding: 5px;
      margin-bottom: 8px;
      background: #fff;

      // 公司信息区域
      .company-message-area {
        background: #f5f5f5;
        height: 155px;
        padding: 8px;
        cursor: pointer;

        span {
          border-bottom: 1px solid #409eff;
          font-size: 14px;
        }

        .company-introduce {
          text-indent: 24px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }

      .company-message-area:hover {
        cursor: pointer;
        background-color: #eef5ff;
      }
    }

    // 表格外壳
    .two-table-wrapped {
      // height: 232px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #fff;

      // 公司公告
      .company-notice {
        @include table-class;
      }

      // 系统消息
      .system-message {
        @include table-class;
      }

      .title {
        font-size: 14px;
        margin-bottom: 5px;
        border-bottom: 1px solid #ea0709;
      }
    }
  }

  .message_title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  // 轮播图默认样式
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
</style>
